import React, { FC, useEffect, useState } from 'react'
import { useSearchParams, useNavigate, useLocation } from 'react-router-dom'
import { Pagination } from 'antd'
type PropsType = {
  page?: number
  pageSize?: number
  total: number
}
const ListPagination: FC<PropsType> = props => {
  const { total } = props
  const router = useNavigate()
  const { pathname } = useLocation()
  const [searchParams] = useSearchParams()
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  useEffect(() => {
    setPage(parseInt(searchParams.get('page') || '') || 1)
    setPageSize(parseInt(searchParams.get('pageSize') || '') || 10)
  }, [searchParams])
  const handelChange = (page: number, pageSize: number) => {
    searchParams.set('page', page.toString())
    searchParams.set('pageSize', pageSize.toString())
    router({
      pathname: pathname,
      search: searchParams.toString(),
    })
  }
  return <Pagination current={page} pageSize={pageSize} total={total} onChange={handelChange} />
}

export default ListPagination
